<template>
	<view class="totalIncome">
		<!-- 总收入部分 -->
		<view class="income-header">
			<view class="withdraw-img">
				<image src="../../../static/hg.png" mode="aspectFill"></image>
				<text class="withdraw-text">尊敬的用户您好</text>
			</view>
			<text class="income-num">{{ userInfo.money }}</text>
			<view class="icon-son">
				<text class="income-label">可提现余额</text>
				<button @click="NAVPAGE('/pages/content/withdraw/cashOut')">点击提现</button>
			</view>
		</view>
		<!-- 收益列表部分 -->
		<view v-for="(item, index) in moneyList" :key="index" class="income-item">
			<view class="income-info">
				<view class="rmb-label">
					<u-icon name="rmb-circle-fill" size="18" color="#f8c22c"></u-icon>
					<text class="income-label">提现</text>
				</view>
				<view class="income-time">{{item.create_at }}</view>
			</view>
			<view class="income-detail">
				<text class="income-amount">{{ item.money }}</text>
				<text class="income-order">{{ item.bank_name }}</text>
			</view>
		</view>
		<view class="" style="margin-top: 200rpx;">
			<u-empty  v-if="moneyList.length == 0" mode="data" icon="http://cdn.uviewui.com/uview/empty/data.png">
		   </u-empty>
		</view>
	 

	</view>
</template>

<script>
	import {
		mapState,
		mapActions
	} from "vuex"
	export default {
		data() {
			return {
				moneyList: [],
			 
			}
		},
		onLoad() {
			this.discovered()
		},
		onShow() {
			this.discovered()
		},
		computed: {
			...mapState("user", ['userInfo'])
		},
		mounted() {
			this.getUserInfo()
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
             discovered(){
				 this.$api.CashWithdrawal({}).then(res=>{
					 this.moneyList = res.data
				 })
			 }
		}
	};
</script>

<style  lang="scss">
	page {
		background-color: #f9f9f9;
	}

	.totalIncome {
		width: 90%;
		margin: auto;

		.income-header {
			display: flex;
			flex-direction: column;
			width: 90%;
			margin: 40rpx auto;
			background-color: #ffe9d5;
			border-radius: 20rpx;
			padding: 30rpx;
			height: 266rpx;

			.withdraw-img {
				display: flex;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					display: block;
				}

				text {
					margin-left: 20rpx;
					width: 224rpx;
					height: 42rpx;
					background: linear-gradient(#701700, #985E39);
					-webkit-background-clip: text;
					-webkit-text-fill-color: transparent;

				}
			}

			.income-num {
				width: 136rpx;
				height: 42rpx;
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 48rpx;
				line-height: 42rpx;
				color: #7d2f13;
				margin: 52rpx 0 28rpx 0;
			}

			.icon-son {
				display: flex;
				align-items: center;
				justify-content: space-between;
				height: 42rpx;
				font-family: MiSans, MiSans;
				font-weight: 500;
				font-size: 32rpx;
				line-height: 42rpx;
				text-align: left;
				font-style: normal;
				text-transform: none;
				color: #985E39;


				button {
					margin: 0;
					padding: 0;
					width: 234rpx;
					height: 54rpx;
					background: #FFEED9;
					border: 2rpx solid #DE966F;
					font-size: 28rpx;
					color: #DE966F;
					line-height: 54rpx;
					text-align: center;
					border-radius: 10rpx;

				}

			}
		}

		.income-item {
			display: flex;
			flex-direction: column;
			background-color: #ffffff;
			width: 90%;
			border-radius: 30rpx;
			margin: 30rpx 0;
			padding: 30rpx;
			height: 200rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			

			.income-info {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.rmb-label {
					display: flex;
					align-items: center;

					.income-label {
						margin-left: 20rpx;
						font-weight: 400;
						font-size: 28rpx;
						color: #262626;
						line-height: 40rpx;
						text-align: left;
					}
				}

				.income-time {
					font-weight: 400;
					font-size: 22rpx;
					color: #787878;
					line-height: 30rpx;
					text-align: right;
				}
			}

			.income-detail {
				display: flex;
				align-items: center;
				justify-content: space-between;

				.income-amount {
					font-size: 48rpx;
					color: #C9170A;
					line-height: 56rpx;
					text-align: left;
				}

				.income-order {
					font-size: 22rpx;
					color: #787878;
					line-height: 30rpx;
					text-align: right;
				}
			}

		}
	}
</style>